import 'package:base_flutter/base_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:ls_work/net/api/http_api.dart';
import 'package:ls_work/res/colors.dart';
import 'package:ls_work/viewmodel/service_order/service_order_process_view_model.dart';
import 'package:ls_work/widgets/dotted_line.dart';

class ServiceOrderProcessWidget extends BaseStatefulMvvmWidget {
  final String id;

  ServiceOrderProcessWidget(this.id);

  @override
  State<StatefulWidget> createState() => _ServiceOrderProcessState();
}

class _ServiceOrderProcessState extends BaseMvvmState<
    ServiceOrderProcessViewModel, ServiceOrderProcessWidget> {
  @override
  Widget buildLoadingContentView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        CommonText('服务过程', textSize: 20, fontWeight: FontWeight.w600)
            .addToContainer(
                margin: EdgeInsets.symmetric(vertical: 16, horizontal: 10)),
        ListView.separated(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              var item = viewModel.listItems[index];
              return Stack(
                children: [
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      CommonText('${item.commonTime}', textSize: 15),

                      CommonText('${item.content}', textSize: 15),

                      item.strRemark.isNullOrEmpty()?Container():
                          CommonText('服务说明：${item.strRemark}'),

                      item.payName.isNullOrEmpty()?Container():
                          item.payName=="免费"?CommonText("费用：${item.payName}"):
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              CommonText("费用：收费"),
                              CommonText("支付方式：${item.payName}"),
                              CommonText("原价：${item.originalPrice}元"),
                              CommonText("实收：${item.acturalPrice}元"),
                            ],
                          ),

                      Container(
                        height: 5,
                      ),
                      item.list == null
                          ? Container()
                          : GridView.count(
                              shrinkWrap: true,
                              physics: NeverScrollableScrollPhysics(),
                              crossAxisCount: 6,
                              crossAxisSpacing: 8,
                              mainAxisSpacing: 8,
                              children:
                                  List.generate((item.list??[]).length, (position) {
                                var e = item.list![position];
                                var url = "${HttpApi.imageHead}${e.attachId}";
                                return Hero(
                                        tag: url,
                                        child: ImageLoad(
                                          url,
                                          fit: BoxFit.cover,
                                        ).toRound(borderRadius: 4.borderRadius))
                                    .onTap(() {
                                  showBigImage(
                                      context,
                                      (item.list??[])
                                          .map((e) =>
                                              "${HttpApi.imageHead}${e.attachId}")
                                          .toList(),
                                      position: position);
                                });
                              }),
                            )
                    ],
                  ).addToContainer(
                      margin: EdgeInsets.only(left: 40, bottom: 20)),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Container(
                        height: 5,
                      ),
                      Container(
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Colours.app_main),
                        width: 12,
                        height: 12,
                      ),
                      index == viewModel.listItems.length - 1
                          ? Container()
                          : DottedLine(
                              direction: Axis.vertical,
                              color: Colours.app_main,
                              height: 2,
                            ).setWeight(1)
                    ],
                  ).setLocation(left: 10, top: 0, bottom: 0),
                ],
              );
            },
            separatorBuilder: (context, index) {
              return Container();
            },
            itemCount: viewModel.listItems.length)
      ],
    ).addToContainer(
        color: Colors.white, padding: EdgeInsets.symmetric(horizontal: 6));
  }

  @override
  Widget buildRootView(BuildContext context, Widget loadingContentWidget) {
    return loadingContentWidget;
  }

  @override
  ServiceOrderProcessViewModel createViewModel() {
    return ServiceOrderProcessViewModel(context, widget.id);
  }

  @override
  void onRetryClick() {
    viewModel.requestRefresh(showAni: false);
  }
}
